import { Button, Card, Image, Input, Modal, Steps, Timeline, message } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useLocation, useNavigate } from "react-router-dom";
import { CarOutlined, SmileOutlined } from '@ant-design/icons';
import { adress, sechAderss } from "../../../api"
import './index.scss'

function Myindex(props: any) {
    // 拿到state模式传递过来的参数
    const state = useLocation()
    let array: any = []
    const [arra, setArray]: any = useState()
    const navigate = useNavigate()
    const [current, setCurrent] = useState(Number)
    const [value, setValue] = useState(String)
    const [isModalOpen, setIsModalOpen] = useState(false);
    let [timeline, settimeline] = useState()
    let data = ['待付款', '待发货', "待签收", "待评价", "已完成", "已取消"]
    const items = reduce()
    function reduce() {
        if (state.state.state == "待退款") {
            data = ['待付款', '待退款', "待签收", "待评价", "已完成", "已取消"]
        }
        return data.map((item: string) => {
            return { title: item }
        })
    }
    function findIndex() {
        return data.findIndex((item) => {
            return item == state.state.state
        })
    }
    useEffect(() => {
        setCurrent(findIndex())
    })
    const handleOk = async () => {
        let res = await adress({ arrival_time: state.state.arrival_time, address: value })
        if (res.data.code === 200) {
            message.success('修改成功')
            navigate('/index/ordermanage')
        } else {
            message.error('修改失败')
        }
        setIsModalOpen(false);
        setValue('')
    };

    const handleCancel = () => {
        setIsModalOpen(false);
        setValue('')
    };
    const change = (e: any) => {
        setValue(e.target.value)
    };
    useEffect(() => {
        sech()
    }, [])
    const sech = async () => {
        let res = await sechAderss({ arrival_time: state.state.arrival_time })
        console.log(res.data.data.trend);
        settimeline(() => res.data.data.trend)
        res.data.data.trend.forEach((element: any) => {
            hj(element)
        });
        setArray(array)
    };
    function hj(value: any) {
        array.push({
            color: 'green', children: value[0].content + ' ' + value[0].payment_time,
        })

    }
    return (
        <div className='seck'>
            <Card title={<div className='title'> <span>订单号：{state.state.id}</span> <span>订单状态：{state.state.state}</span></div>} style={{ width: '100%' }}>
                <Steps
                    current={current}
                    items={items}
                />
            </Card>
            <Card title={<div className='title'> <span>物流公司：{state.state.shopping_delivery}</span> <span>运单号：{state.state.arrival_time}</span></div>} style={{ width: '100%' }}>
                <div className="logistics">
                    <div className="left">
                        <span>收货地址：{state.state.logistics.address}&emsp;{state.state.username} &emsp;{state.state.logistics.phone_number}</span>
                        <div className="content">
                            {state.state.state != "待发货" ? <Button type='primary' disabled>修改收货地址</Button> : (<Button type='primary' onClick={() => { setIsModalOpen(true); }}>修改收货地址</Button>)}
                        </div>
                    </div>
                    <div className="right"><span>买家备注：{state.state.logistics.remark}</span></div>
                </div>
                <Timeline className='linetime' items={arra} />
            </Card>
            <Card title={<div className='title'> <span>支付方式：{state.state.payment_method.name + '支付'}</span> <span>交易流水号：{state.state.payment_method.number}</span></div>} style={{ width: '100%' }}>
                <p>发票类型：{state.state.payment_method.style}</p>
                <p>发票内容：{state.state.payment_method.content}</p>
                <p>发票抬头：{state.state.payment_method.title}</p>
            </Card>
            <Card title={<div className='title'> <span>商品信息</span> </div>} style={{ width: '100%' }}>
                <div className="top">
                    <Image
                        width={100}
                        src={state.state.img}
                    />
                    <div className='shopping_name'>
                        <span>{state.state.shopping_name}</span>
                        <span>{'颜色:' + state.state.shopping_color}</span>
                        <span>{'￥' + state.state.shopping_price + '*' + state.state.shopping_num}</span>
                    </div>
                </div>
                <div className="bottom">
                    <p>商品总价：<span>{state.state.shopping_price * state.state.shopping_num + ".00元"}</span></p>
                    <p>运费：<span>{state.state.freight == 0 ? '0元' : ''}</span></p>
                    <p>实际付款：<span>{state.state.payment_time == '未付款' ? '未付款' : state.state.shopping_price * state.state.shopping_num + ".00元"}</span></p>
                </div>
            </Card>
            <Modal title="修改地址" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText="确认"
                cancelText="取消">
                <Input size="large" value={value} onChange={(e) => { change(e) }} placeholder="large size" prefix={<CarOutlined />} />
            </Modal>
        </div>
    );
}

export default Myindex;